<!doctype HTML>
<!--
  This tests a corner case of invalidation of squashed layers. It passes if the element "I should not disappear!" does not disappear.

  The corner case is:

  Frame 1: the elements with ids "squash1" and "squash2" squash into "squashtarget"
  Frame 2 (on end of transform animation): both elements stop squashing, but there is now an intermediate paint layer that paints
     after squash1 but before squash2. Since multiple layers can squash together only if they are sequential, squash2 stops squashing,
     and so we need to invalidate the area in the document squash2 *now* paints into (for frame 3).
  Frame 3: draw squash1 and squash2 into the root frame.

-->
<style>
@keyframes animate{0%{opacity:0}to{opacity:1}}
</style>
<div style="height: 16px; position: relative; width: 16px; z-index: 0;">
  <div  style="transform: scale(3); height: 16px; position: relative; width: 16px; z-index: -1; animation: animate .7s infinite">
  </div>
  <div id="target" style="position: absolute; transition: transform ease .01s; transform: scale(0); width: 18px; height: 16px"></div>
  </div>
</div>
<div id="squashtarget" style="display: inline-block; height: 16px; position: relative; width: 16px; z-index: 0; margin-top: 20px">
  <div style=" transform: scale(3); height: 16px; position: relative; width: 16px; z-index: -1"></div>
</div>
<div id="squash1" style="display: inline-block; position: relative; width: 16px; z-index: 0; margin-left: 15px">
  <div style="transform: scale(3); position: relative; width: 16px; z-index: -1">
  </div>
</div>
<div id="squash2" style="overflow: hidden; position: relative;margin-top: 30px; border">
  I should not disappear!
</div>
<script>
onload = function() {
  target.style.transform = "scale(1)";
}
</script>
